<template>
    <view>
        <!-- <back></back> -->
        <view class="item it_flex">
            <view class="it_left">模板名称</view>
            <input type="text" placeholder="请输入模板名称" v-model="name" />
        </view>
        <view class="item u-flex u-row-between">
            <view class="title">计价方式</view>
            <view class="u-flex">
                <view
                    class="u-flex"
                    style="margin-left: 20rpx"
                    @click="radClick(index)"
                    v-for="(item, index) in list"
                >
                    <view class="radius u-flex-center" :class="index == tIndex ? 'rad_css' : ''">
                        <u-icon
                            name="checkmark"
                            size="20"
                            color="#fff"
                            v-if="index == tIndex"
                        ></u-icon>
                    </view>
                    <view class="grey">{{ item }}</view>
                </view>
            </view>
        </view>
        <view class="item u-flex u-row-between">
            <view class="title">选择全部区域</view>
            <view class="u-flex">
                <view class="u-flex" style="margin-left: 20rpx" @click="quanxuanClick()">
                    <view class="radius u-flex-center" :class="quanxuan == 1 ? 'rad_css' : ''">
                        <u-icon
                            name="checkmark"
                            size="20"
                            color="#fff"
                            v-if="quanxuan == 1"
                        ></u-icon>
                    </view>
                    <!-- <view class="grey">全选</view> -->
                </view>
            </view>
        </view>

        <view class="item" v-for="(item, index) in quList" :key="index">
            <view class="top u-flex u-row-between">
                <!-- <view>除新疆以外地区包邮</view> -->
                <input type="text" v-model="item.title" style="text-align: left" />
                <view class="u-flex">
                    <image
                        class="del"
                        :src="BaseUrl + '/static/wImg/delGrey.png'"
                        @click="dellist(index)"
                    ></image>
                    <!-- <image
                        class="edit"
                        :src="BaseUrl + '/static/wImg/editGrey.png'"
                        @click="bjlist(index)"
                    ></image> -->
                </view>
            </view>

            <view class="it_right_duo">
                <view
                    class="address"
                    v-if="item.address.length > 0 && quanxuan == 0"
                    @click="choseAdres(index)"
                >
                    <view class="" v-for="items in item.address">{{ items }},</view>
                </view>
                <view class="cont u-flex-center" @click="choseAdres(index)" v-if="quanxuan == 0"
                    >选择配送区域</view
                >
                <view class="u-flex u-row-between u-flex-wrap it_rig_line">
                    <view class="it_ban u-flex">
                        <view class="it_left">首件</view>
                        <input type="number" placeholder="请输入" v-model="item.first" />
                    </view>
                    <view class="it_ban u-flex">
                        <view class="it_left">运费</view>
                        <input type="number" placeholder="请输入" v-model="item.first_fee" />元
                    </view>
                    <view class="it_ban u-flex">
                        <view class="it_left">续件</view>
                        <input type="number" placeholder="请输入" v-model="item.additional" />
                    </view>
                    <view class="it_ban u-flex">
                        <view class="it_left">运费</view>
                        <input type="number" placeholder="请输入" v-model="item.additional_fee" />元
                    </view>
                </view>
            </view>
        </view>
        <!-- <view class="item">
			<view class="top u-flex u-row-between">
				<view>可配送地区2</view>
				<view class="u-flex">
					<image class="del" src="@/static/wImg/delGrey.png"></image>
					<image class="edit" src="@/static/wImg/editGrey.png"></image>
				</view>
			</view>
			
		</view> -->
        <view class="add u-flex-center" @click="getAdd()" v-if="tIndex != 2">新增配送区域</view>
        <view class="submit u-flex-center" @click="getSave()">保存</view>
        <view class="layer" v-if="is_area_show">
            <view class="layer-content">
                <view
                    class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between"
                >
                    <view class="text-cc" @click="is_area_show = false">取消</view>
                    <view class="" style="color: #007aff" @click="adresSubmit()">确定</view>
                </view>
                <picker-view
                    :value="multiIndex"
                    :indicator-style="indicatorStyle"
                    class="picker-view"
                    @change="changeAdres"
                >
                    <picker-view-column>
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist1"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="arealist2">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist2"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <!-- <picker-view-column v-if="arealist3">
						<view class="item-pircker" v-for="(item,index) in arealist3" :key="index">{{item.name}}</view>
					</picker-view-column> -->
                </picker-view>
            </view>
        </view>
    </view>
</template>

<script>
import { BaseUrl } from "@/utils/req";
export default {
    data() {
        return {
            BaseUrl,
            tIndex: 0,
            name: "",
            list: ["按件数", "按重量", "免运费"],
            is_area_show: false,
            // 城市地区
            arealist1: [],
            arealist2: [],
            arealist3: [],
            areaname: "",
            multiIndex: [0, 0, 0],
            indicatorStyle: "height: 80rpx;",
            quList: [],
            listindex: "",
            id: "",
            quanxuan: 0,
        };
    },
    onLoad(options) {
        this.id = options.id ? options.id : "";
        if (options.id) {
            uni.setNavigationBarTitle({
                title: "修改运费模版",
            });
        }
    },
    onReady() {
        this.$u.post("/api/index/area_list", {}).then((res) => {
            if (res.code == 1) {
                var address = res.data;
                this.arealist1 = address;
                this.arealist2 = address[0].children;
                this.arealist3 = address[0].children[0].children;
            }
        });
        if (this.id) {
            this.$u
                .post("/api/shop/get_logistics_details", {
                    ids: this.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        // this.quList = res.data.children
                        this.name = res.data.name;
                        this.tIndex = res.data.valuation;
                        this.quanxuan = res.data.quanxuan;
                        this.quList = res.data.children;

                        for (let i = 0; i < this.quList.length; i++) {
                            this.quList[i].aa = "";
                        }
                        this.quList = this.quList;
                        console.log(this.quList, "qu");
                    }
                });
        }
    },
    methods: {
        quanxuanClick() {
            this.quanxuan = this.quanxuan == 0 ? 1 : 0;
        },
        radClick(index) {
            this.tIndex = index;
            if (index == 2) {
                this.quList = [];
            }
        },
        changeAdres(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.multiIndex[0]) {
                this.multiIndex = [curMultiIndex[0], 0, 0];
            } else if (curMultiIndex[1] != this.multiIndex[1]) {
                this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0];
            } else if (curMultiIndex[2] != this.multiIndex[2]) {
                this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]];
            }
            console.log(this.multiIndex);
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            this.arealist2 = this.arealist1[i].children;
            this.arealist3 = this.arealist1[i].children[j].children;
            console.log(this.cateid);
        },
        adresSubmit() {
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            this.areaname = this.arealist1[i].name + "/" + this.arealist1[i].children[j].name;
            // + '/' + this.arealist1[i].children[j].children[k].name

            this.is_area_show = false;
            var provinceid = this.arealist1[i].id;
            var cityid = this.arealist1[i].children[j].id;
            // console.log(this.quList[this.listindex].address)
            // this.quList[this.listindex].address.push(this.areaname)
            this.quList.forEach((item, i) => {
                if (i == this.listindex) {
                    item.address.push(this.areaname);
                    item.province.push(provinceid);
                    item.citys.push(cityid);
                }
            });
            this.quList = this.quList;
            console.log(this.quList);
        },
        choseAdres(index) {
            this.listindex = index;
            this.is_area_show = true;
        },
        //添加新地址
        getAdd() {
            var arr = {
                title: "",
                address: [],
                province: [],
                citys: [],
                first: "",
                first_fee: "",
                additional: "",
                additional_fee: "",
                aa: 1,
            };
            this.quList.push(arr);
        },
        getSave() {
            this.$u
                .post("/api/shop/add_logistics", {
                    name: this.name,
                    valuation: this.tIndex,
                    quList: this.quList,
                    logistics_id: this.id ? this.id : "",
                    quanxuan: this.quanxuan,
                })
                .then((res) => {
                    if (res.code == 1) {
                        uni.showModal({
                            title: res.msg,
                            showCancel: false,
                            success() {
                                uni.navigateBack({
                                    delta: 1,
                                });
                            },
                        });
                    } else {
                        uni.showModal({
                            title: res.msg,
                            showCancel: false,
                        });
                    }
                });
        },
        dellist(index) {
            this.quList.splice(index, 1);
        },
        bjlist(index) {
            for (let i = 0; i < this.quList.length; i++) {
                if (i == index) {
                    this.quList[i].aa = "1";
                }
            }
            this.quList = this.quList;
            console.log(this.quList);
        },
    },
};
</script>
<style>
page {
    width: 100%;
    padding: 0 33rpx;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.it_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item {
    padding: 32rpx 30rpx;
    background: #fff;
    font-size: 28rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    margin-top: 30rpx;

    .top {
        font-weight: bold;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #dfdfdf;

        .del {
            width: 36rpx;
            height: 36rpx;
        }

        .edit {
            width: 34rpx;
            height: 34rpx;
            margin-left: 28rpx;
        }
    }

    .it_left {
        font-weight: bold;
        color: #222;
    }

    input {
        font-size: 28rpx;
        text-align: right;
    }

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .radius {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-right: 10rpx;
        border: 1rpx solid #888;
    }

    .rad_css {
        background: #606dce;
        border: 1rpx solid #606dce;
    }

    .grey {
        color: #333;
        font-size: 28rpx;
    }

    .cont {
        width: 510rpx;
        height: 80rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #606dce;
        margin: 0 auto;
        margin-top: 30rpx;
        background: #e0fef4;
        border-radius: 10rpx;
    }
}

.it_right_duo {
    border-bottom: 1rpx solid #dfdfdf;

    &:last-child {
        border: none;
    }
}

.address {
    font-size: 24rpx;
    color: #888;
    margin-top: 20rpx;
    line-height: 40rpx;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // display: -webkit-box;
    // -webkit-line-clamp: 3;
    // -webkit-box-orient: vertical;
    display: flex;
    flex-wrap: wrap;
}

.it_ban {
    width: 50%;
    margin-top: 19rpx;

    input {
        width: 170rpx;
        height: 52rpx;
        font-size: 24rpx;
        background: #f5f5f5;
        border-radius: 26rpx;
        text-align: center;
        margin-left: 20rpx;
    }
}

.add {
    width: 256rpx;
    height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
}

.submit {
    width: 630rpx;
    height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 280rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.layer-content {
}

/* 浮层内容 */
.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
}

.line-height-80 {
    height: 80rpx;
    line-height: 80rpx;
}

.padding-lr-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.bg-ff {
    background: #fff;
}

.border-bottom-ed {
    border-bottom: 1rpx solid #ededed;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
}

.item-pircker {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
